<template>
  <div class="DepartmentItem">
    <van-nav-bar :title="'新建' + selectionTxt" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <div class="content-input" v-for="(item, index) in list" :key="index">
      <van-field autocomplete="off"
        clearable
        :label="selectionTxt"
        :placeholder="'请输入' + selectionTxt + '名称'"
        v-model="list[index].value"
      />
    </div>
    <div class="add" @click="add">
      <van-icon name="plus" size="25" />
    </div>
    <div class="content-btn">
      <button>新建部门</button>
      <button @click="preservation">保存</button>
      <button @click="toQuit">退出</button>
    </div>
  </div>
</template>

<script>
import {Dialog} from 'vant'
export default {
  data() {
    return {
      //储存每个input的值,通过遍历取得每个value
      list: [
        {
          item: 1,
          value: ''
        }
      ],
      id: this.$route.params.id,
      selectionTxt: ''
    }
  },
  mounted() {
    this.judgeIndex()
  },
  methods: {
    // 判断index
    judgeIndex() {
      switch (parseInt(this.id)) {
        case 1:
          this.selectionTxt = '部门'
          break
        case 2:
          this.selectionTxt = '职位'
          break
        case 3:
          this.selectionTxt = '数据权限'
      }
    },
    add() {
      this.list.push({
        item: 1 + this.list.length,
        value: ''
      })
    },
    // 保存
    preservation() {
      var list = []
      for (var i in this.list) {
        //为空的输入框不允许储存进新数组
        if (this.list[i].value.trim() !== '') {
          list.push(...this.list[i].value)
          this.$toast.success('保存成功')
        }
      }
      // 将list作为数据发送axios即可

      console.log('要发送的数据', this.list)
    },
    // 退出
    toQuit() {
      Dialog.confirm({
        title: '提示',
        message: '未保存，确定退出吗？'
      })
      .then(() => {
        // on confirm
        this.$router.back()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.DepartmentItem {
  width: 100%;
  height: calc(100%);
  background: white;
  left: 0;
  .content-input {
    /deep/.van-field__label {
      width: 50px;
      white-space: nowrap;
    }
    /deep/.van-field__control {
      font-size: 18px;
    }
  }
  .add {
    text-align: center;
    box-shadow: 0px 0px 5px 0 #e2e2e2;
    margin-top: 10px;
    color: #b3b3b3;
    padding: 5px 0;
  }
  .content-btn {
    width: 100%;
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    button {
      border: none;
      background: transparent;
      padding: 8px 0;
      font-size: 16px;
      width: 95%;
      margin: 2px auto;
      border-radius: 5px;
      &:nth-child(1) {
        border: 1px solid cornflowerblue;
        color: cornflowerblue;
        display: none;
      }
      &:nth-child(2) {
        // border: 1px solid cornflowerblue;
        color: white;
        background: cornflowerblue;
      }
      &:nth-child(3) {
        // border: 1px solid cornflowerblue;
        color: white;
        background: #ff5757;
      }
    }
  }
}
</style>